<template>
  <div class="text-drag-container">
    <h2>文字拖放演示</h2>

    <!-- 可拖动的文字源区域 -->
    <div class="drag-source">
      <p>可拖动的示例文字：</p>
      <div
        class="draggable-text"
        draggable="true"
        @dragstart="handleDragStart"
        v-for="(text, index) in draggableTexts"
        :key="index"
      >
        {{ text }}
      </div>
    </div>

    <!-- 拖放目标区域 -->
    <div
      class="drop-area"
      @dragover.prevent="isDragging = true"
      @dragleave="isDragging = false"
      @drop.prevent="handleDrop"
      :class="{ active: isDragging }"
    >
      <div class="drop-content">
        <i class="fas fa-arrows-alt fa-3x"></i>
        <p>将文字拖放到这里</p>
        <p class="hint">支持多次拖放，会累积显示</p>
      </div>
    </div>

    <!-- 显示拖放的文字 -->
    <div class="dropped-texts" v-if="droppedTexts.length > 0">
      <h3>已拖放的文字：</h3>
      <ul>
        <li v-for="(text, index) in droppedTexts" :key="index">
          {{ text }}
          <button @click="removeText(index)" class="remove-btn">
            <i class="fas fa-times"></i>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 可拖动的文字列表
const draggableTexts = [
  "这是第一段可拖动的文字",
  "Vue3 拖放功能演示",
  "Hello World!",
  "拖动我到下方区域",
  "文字拖放交互示例",
];

// 状态管理
const isDragging = ref(false);
const droppedTexts = ref([]);
const currentDragText = ref("");

// 开始拖动时记录文字内容
const handleDragStart = (e) => {
  currentDragText.value = e.target.textContent.trim();
  // 设置拖动时的效果（可选）
  e.dataTransfer.setData("text/plain", currentDragText.value);
};

// 处理文字拖放
const handleDrop = (e) => {
  isDragging.value = false;

  console.log(e.dataTransfer);

  // 从事件中获取拖放的文字（兼容不同浏览器）
  const droppedText =
    e.dataTransfer.getData("text/plain") || currentDragText.value;

  if (droppedText) {
    // 将拖放的文字添加到列表中
    droppedTexts.value.push(droppedText);
    // 清空当前拖动的文字
    currentDragText.value = "";
  }
};

// 移除已拖放的文字
const removeText = (index) => {
  droppedTexts.value.splice(index, 1);
};
</script>

<style scoped>
.text-drag-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "Arial", sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 2rem;
}

/* 可拖动文字源区域 */
.drag-source {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #f0f7ff;
  border-radius: 8px;
}

.drag-source p {
  color: #444;
  margin-bottom: 1rem;
  font-weight: bold;
}

.draggable-text {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.8rem 1.2rem;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  color: #1890ff;
  cursor: move;
  transition: all 0.2s ease;
}

.draggable-text:hover {
  background-color: #bae7ff;
  transform: translateY(-2px);
}

/* 拖放目标区域 */
.drop-area {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 3rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
  margin-bottom: 2rem;
}

.drop-area.active {
  border-color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
}

.drop-content {
  color: #666;
}

.fas {
  color: #666;
  margin-bottom: 1rem;
}

.hint {
  color: #999;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* 已拖放文字区域 */
.dropped-texts {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.dropped-texts h3 {
  color: #444;
  margin-top: 0;
  margin-bottom: 1rem;
}

.dropped-texts ul {
  list-style: none;
  padding: 0;
}

.dropped-texts li {
  position: relative;
  padding: 1rem 1rem 1rem 2rem;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 0.8rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dropped-texts li::before {
  content: "•";
  position: absolute;
  left: 0.8rem;
  color: #1890ff;
  font-weight: bold;
}

.remove-btn {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: none;
  border: none;
  color: #ff4d4f;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.remove-btn:hover {
  background-color: #fff1f0;
}
</style>
